<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>威客任务 - 筛选查询</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #2C6ECB;
      --primary-light: #E8F0FE;
      --success: #36B37E;
      --warning: #FFAB00;
      --danger: #FF5630;
      --text-primary: #172B4D;
      --text-secondary: #6B778C;
      --border-light: #E5E8EF;
      --bg-white: #FFFFFF;
      --bg-light: #F4F5F7;
      --gray-100: #F9FAFC;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      padding-bottom: 60px;
      margin: 0;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 20px;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 16px 12px 45px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--gray-100);
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }
    
    /* 筛选工具栏 */
    .filter-tabs {
      background-color: var(--bg-white);
      display: flex;
      border-bottom: 1px solid var(--border-light);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .filter-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .filter-tab {
      flex: 1;
      min-width: auto;
      padding: 12px 16px;
      background: none;
      border: none;
      font-size: 15px;
      color: var(--text-secondary);
      position: relative;
      white-space: nowrap;
    }
    
    .filter-tab.active {
      color: var(--primary);
    }
    
    .filter-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary);
    }
    
    /* 筛选面板 */
    .filter-panels {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .filter-panel {
      padding: 16px;
      display: none;
    }
    
    .filter-panel.active {
      display: block;
    }
    
    .panel-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .filter-option {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      border: 1px solid var(--border-light);
      background-color: white;
      color: var(--text-primary);
    }
    
    .filter-option.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 价格筛选 */
    .price-filter {
      padding: 10px 0;
    }
    
    .price-inputs {
      display: flex;
      gap: 10px;
      margin: 15px 0;
    }
    
    .price-input {
      flex: 1;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      font-size: 14px;
    }
    
    .price-input::placeholder {
      color: var(--text-secondary);
    }
    
    .price-slider {
      width: 100%;
      margin: 20px 0;
    }
    
    /* 时间筛选 */
    .time-filter {
      padding: 10px 0;
    }
    
    /* 筛选操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      padding: 10px 16px;
      background-color: var(--gray-100);
      border-top: 1px solid var(--border-light);
    }
    
    .filter-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      border: none;
    }
    
    .reset-btn {
      background-color: white;
      color: var(--text-secondary);
      border: 1px solid var(--border-light);
    }
    
    .confirm-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 筛选结果 */
    .filter-result {
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .result-count {
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    .view-toggle {
      display: flex;
      gap: 5px;
    }
    
    .view-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .view-btn.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 任务列表 */
    .tasks-container {
      padding: 10px 16px;
    }
    
    .task-item {
      background-color: var(--bg-white);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      border: 1px solid var(--border-light);
      text-decoration: none;
      color: var(--text-primary);
      display: block;
    }
    
    /* 无图任务样式 */
    .task-no-image {
      padding: 16px;
    }
    
    /* 单图任务样式 */
    .task-single-image {
      display: flex;
      gap: 12px;
    }
    
    .task-single-image .task-media {
      width: 100px;
      flex-shrink: 0;
    }
    
    .task-single-image .task-content {
      flex: 1;
      padding: 16px 16px 16px 0;
    }
    
    .task-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px 0 0 10px;
    }
    
    /* 多图任务样式 */
    .task-multi-image {
      padding: 16px;
    }
    
    .task-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .multi-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    /* 网格视图任务 */
    .tasks-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .grid-task {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .grid-task .task-images {
      margin-bottom: 8px;
    }
    
    .grid-task .task-title {
      font-size: 14px;
      margin-bottom: 5px;
      -webkit-line-clamp: 2;
    }
    
    .grid-task .task-desc {
      font-size: 12px;
      margin-bottom: 8px;
      -webkit-line-clamp: 1;
    }
    
    .grid-task .task-meta {
      margin-top: auto;
    }
    
    .grid-task .task-price {
      font-size: 14px;
    }
    
    /* 任务内容通用样式 */
    .task-category {
      display: inline-block;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
      margin-bottom: 8px;
    }
    
    .task-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .task-price {
      font-size: 16px;
      font-weight: 600;
      color: var(--danger);
    }
    
    .task-info {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .task-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 紧急任务标识 */
    .urgent-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--danger);
      margin-left: 8px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布任务按钮 */
    .fab-button {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(44, 110, 203, 0.3);
      border: none;
      z-index: 90;
    }
    
    /* 已选筛选标签 */
    .selected-filters {
      padding: 8px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    
    .filter-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background-color: var(--primary-light);
      color: var(--primary);
      border-radius: 16px;
      font-size: 13px;
    }
    
    .remove-filter {
      background: none;
      border: none;
      color: var(--primary);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <button class="header-btn" id="backBtn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="header-title">威客任务</div>
    <button class="header-btn">
      <i class="fa fa-bell-o"></i>
    </button>
  </div>
  
  <!-- 搜索区域 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索任务关键词、技能...">
    </div>
  </div>
  
  <!-- 筛选标签页 -->
  <div class="filter-tabs">
    <button class="filter-tab active" data-panel="category-panel">分类</button>
    <button class="filter-tab" data-panel="price-panel">价格</button>
    <button class="filter-tab" data-panel="time-panel">发布时间</button>
    <button class="filter-tab" data-panel="other-panel">其他</button>
  </div>
  
  <!-- 已选筛选条件 -->
  <div class="selected-filters">
    <span class="filter-tag">
      设计创意
      <button class="remove-filter"><i class="fa fa-times"></i></button>
    </span>
    <span class="filter-tag">
      500-2000元
      <button class="remove-filter"><i class="fa fa-times"></i></button>
    </span>
    <span class="filter-tag">
      近7天
      <button class="remove-filter"><i class="fa fa-times"></i></button>
    </span>
  </div>
  
  <!-- 筛选面板 -->
  <div class="filter-panels">
    <!-- 分类筛选面板 -->
    <div class="filter-panel active" id="category-panel">
      <h3 class="panel-title">任务分类</h3>
      <div class="filter-options">
        <button class="filter-option">全部任务</button>
        <button class="filter-option active">设计创意</button>
        <button class="filter-option">文案写作</button>
        <button class="filter-option">程序开发</button>
        <button class="filter-option">视频制作</button>
        <button class="filter-option">营销推广</button>
        <button class="filter-option">生活服务</button>
        <button class="filter-option">翻译服务</button>
        <button class="filter-option">数据处理</button>
        <button class="filter-option">商务服务</button>
      </div>
    </div>
    
    <!-- 价格筛选面板 -->
    <div class="filter-panel" id="price-panel">
      <h3 class="panel-title">价格范围</h3>
      <div class="price-filter">
        <div class="filter-options">
          <button class="filter-option">全部价格</button>
          <button class="filter-option">0-500元</button>
          <button class="filter-option active">500-2000元</button>
          <button class="filter-option">2000-5000元</button>
          <button class="filter-option">5000元以上</button>
        </div>
        
        <div class="price-inputs">
          <input type="number" class="price-input" placeholder="最低" value="500">
          <span style="align-self: center;">-</span>
          <input type="number" class="price-input" placeholder="最高" value="2000">
        </div>
        
        <input type="range" min="0" max="10000" value="2000" class="price-slider" id="priceRange">
        <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary);">
          <span>0元</span>
          <span>5000元</span>
          <span>10000元+</span>
        </div>
      </div>
    </div>
    
    <!-- 时间筛选面板 -->
    <div class="filter-panel" id="time-panel">
      <h3 class="panel-title">发布时间</h3>
      <div class="time-filter">
        <div class="filter-options">
          <button class="filter-option">全部时间</button>
          <button class="filter-option">今天</button>
          <button class="filter-option active">近7天</button>
          <button class="filter-option">近30天</button>
          <button class="filter-option">自定义</button>
        </div>
      </div>
    </div>
    
    <!-- 其他筛选面板 -->
    <div class="filter-panel" id="other-panel">
      <h3 class="panel-title">其他条件</h3>
      <div class="filter-options">
        <button class="filter-option active">全部任务</button>
        <button class="filter-option">紧急任务</button>
        <button class="filter-option">长期任务</button>
        <button class="filter-option">线上任务</button>
        <button class="filter-option">本地任务</button>
      </div>
      
      <h3 class="panel-title" style="margin-top: 20px;">任务状态</h3>
      <div class="filter-options">
        <button class="filter-option active">全部状态</button>
        <button class="filter-option">未接单</button>
        <button class="filter-option">已接单</button>
        <button class="filter-option">已完成</button>
      </div>
    </div>
  </div>
  
  <!-- 筛选操作按钮 -->
  <div class="filter-actions">
    <button class="filter-btn reset-btn">重置筛选</button>
    <button class="filter-btn confirm-btn">确认筛选</button>
  </div>
  
  <!-- 筛选结果 -->
  <div class="filter-result">
    <div class="result-count">找到 24 个符合条件的任务</div>
    <div class="view-toggle">
      <button class="view-btn active" id="listViewBtn">
        <i class="fa fa-list"></i>
      </button>
      <button class="view-btn" id="gridViewBtn">
        <i class="fa fa-th-large"></i>
      </button>
    </div>
  </div>
  
  <!-- 任务列表 -->
  <div class="tasks-container" id="tasksList">
    <!-- 无图任务 -->
    <a href="#" class="task-item task-no-image">
      <span class="task-category">设计创意</span>
      <h3 class="task-title">公司VI设计全套，包括Logo、名片、信封等</h3>
      <p class="task-desc">科技公司需要设计全套VI，要求现代简约风格，体现科技感和创新精神，需要提供多个方案供选择。</p>
      <div class="task-meta">
        <div class="task-price">¥1800</div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 15天</span>
          <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
        </div>
      </div>
    </a>
    
    <!-- 单图任务 -->
    <a href="#" class="task-item task-single-image">
      <div class="task-media">
        <img src="https://picsum.photos/300/300?random=1" alt="Logo设计任务" class="task-image">
      </div>
      <div class="task-content">
        <span class="task-category">设计创意</span>
        <h3 class="task-title">奶茶店Logo设计，要求清新可爱风格</h3>
        <p class="task-desc">新开奶茶店需要设计品牌Logo，风格要清新可爱，符合年轻人审美，需要提供3-5个方案供选择。</p>
        <div class="task-meta">
          <div class="task-price">¥500
            <span class="urgent-tag"><i class="fa fa-fire"></i> 紧急</span>
          </div>
          <div class="task-info">
            <span class="task-tag"><i class="fa fa-clock-o"></i> 3天</span>
            <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
          </div>
        </div>
      </div>
    </a>
    
    <!-- 多图任务 -->
    <a href="#" class="task-item task-multi-image">
      <span class="task-category">设计创意</span>
      <h3 class="task-title">电商平台商品详情页设计，3个页面</h3>
      <div class="task-images">
        <img src="https://picsum.photos/300/300?random=10" alt="参考设计1" class="multi-image">
        <img src="https://picsum.photos/300/300?random=11" alt="参考设计2" class="multi-image">
        <img src="https://picsum.photos/300/300?random=12" alt="参考设计3" class="multi-image">
      </div>
      <p class="task-desc">为服装电商平台设计商品详情页，需要包含主图展示区、规格选择、详情描述等模块，参考提供的设计风格。</p>
      <div class="task-meta">
        <div class="task-price">¥1200</div>
        <div class="task-info">
          <span class="task-tag"><i class="fa fa-clock-o"></i> 7天</span>
          <span class="task-tag"><i class="fa fa-user-o"></i> 选1人</span>
        </div>
      </div>
    </a>
  </div>
  
  <!-- 发布任务按钮 -->
  <button class="fab-button">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>任务</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-exchange nav-icon"></i>
      <span>交易</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选面板切换
    const filterTabs = document.querySelectorAll('.filter-tab');
    const filterPanels = document.querySelectorAll('.filter-panel');
    
    filterTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有标签的活跃状态
        filterTabs.forEach(t => t.classList.remove('active'));
        // 隐藏所有面板
        filterPanels.forEach(p => p.classList.remove('active'));
        
        // 激活当前标签和对应面板
        this.classList.add('active');
        const panelId = this.getAttribute('data-panel');
        document.getElementById(panelId).classList.add('active');
      });
    });
    
    // 筛选选项选择
    document.querySelectorAll('.filter-option').forEach(option => {
      option.addEventListener('click', function() {
        // 在同一组中只能选择一个选项
        const parent = this.closest('.filter-options');
        parent.querySelectorAll('.filter-option').forEach(opt => {
          opt.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 视图切换
    const listViewBtn = document.getElementById('listViewBtn');
    const gridViewBtn = document.getElementById('gridViewBtn');
    const tasksList = document.getElementById('tasksList');
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      gridViewBtn.classList.remove('active');
      tasksList.classList.remove('tasks-grid');
    });
    
    gridViewBtn.addEventListener('click', function() {
      gridViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      tasksList.classList.add('tasks-grid');
    });
    
    // 移除筛选标签
    document.querySelectorAll('.remove-filter').forEach(btn => {
      btn.addEventListener('click', function() {
        this.closest('.filter-tag').remove();
        
        // 如果没有筛选标签了，隐藏整个容器
        if (document.querySelectorAll('.filter-tag').length === 0) {
          document.querySelector('.selected-filters').style.display = 'none';
        }
      });
    });
    
    // 价格滑块
    const priceRange = document.getElementById('priceRange');
    priceRange.addEventListener('input', function() {
      const maxPrice = document.querySelector('.price-input[placeholder="最高"]');
      maxPrice.value = this.value;
    });
    
    // 确认筛选
    document.querySelector('.confirm-btn').addEventListener('click', function() {
      // 这里可以添加应用筛选条件的逻辑
      alert('筛选条件已应用');
    });
    
    // 重置筛选
    document.querySelector('.reset-btn').addEventListener('click', function() {
      // 重置所有筛选选项
      document.querySelectorAll('.filter-option').forEach(option => {
        option.classList.remove('active');
      });
      
      // 激活每个选项组的第一个选项
      document.querySelectorAll('.filter-options').forEach(group => {
        group.querySelector('.filter-option:first-child').classList.add('active');
      });
      
      // 清空价格输入
      document.querySelectorAll('.price-input').forEach(input => {
        input.value = '';
      });
      
      // 重置价格滑块
      priceRange.value = 0;
      
      // 清空已选筛选标签
      document.querySelectorAll('.filter-tag').forEach(tag => {
        tag.remove();
      });
      document.querySelector('.selected-filters').style.display = 'none';
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      console.log('搜索任务:', searchTerm);
      // 实际应用中可以在这里添加搜索逻辑
    });
    
    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', function() {
      history.back();
    });
    
    // 发布任务按钮
    document.querySelector('.fab-button').addEventListener('click', function() {
      alert('发布新任务');
    });
    
    // 底部导航切换
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>
